<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px '微软雅黑';
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }

    /* 伪类选择器 checked 谁选中了的  选择器就会生效 */
    .ck:checked {
      transform: scale(1.5);
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll" />
        <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck" />
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    /* 
     需求
     1 给 全选按钮绑定点击事件
        1 获取 全选按钮的选中状态 
        2 遍历小商品的复选框 让他们的选中状态 等于 全选按钮的选中状态 

     2 给所有小商品的按钮 点击   设置全选按钮的选中状态
       所有的小复选框 都选中  ，  全选按钮才选中 
        拿 商品的复选框的 数量  和 选中了的商品的复选框的数量 比较

     */

    const checkAll = document.querySelector('#checkAll');
    const ckList = document.querySelectorAll('.ck'); // 获取所有的商品的复选框
    //  全选按钮 点击事件
    /*     checkAll.addEventListener('click', function () {
          // 获取 全选按钮的选中状态  checked
          // 遍历小商品的复选框 让他们的选中状态 等于 全选按钮的选中状态
          for (let index = 0; index < ckList.length; index++) {
            ckList[index].checked = checkAll.checked;
          }
        });
    
        // 循环 绑定点击事件
        for (let index = 0; index < ckList.length; index++) {
          ckList[index].addEventListener('click', function () {
            // 商品的复选框的 数量  ckList.length
            // 选中了的商品的复选框的数量 重点！！！  document.querySelectorAll('.ck:checked').length
    
            // document.querySelectorAll('.ck:checked');
    
            const length = ckList.length;
            const checkedLength = document.querySelectorAll('.ck:checked').length;
    
            // if (length === checkedLength) {
            //   // 可以全选
            //   checkAll.checked = true;
            // } else {
            //   checkAll.checked = false;
            // }
    
            checkAll.checked = length === checkedLength;
          });
        } */

    // 用数组方法实现全选功能   伪数组转真数组的方法[...伪数组];
    ckList.forEach(e => {
      e.addEventListener('click', e => {
        const ev = [...ckList].every(v => v.checked);
        if (ev == true) {
          checkAll.checked = true;
        } else {
          checkAll.checked = false;
        };
      });
    });
    checkAll.addEventListener('click', (e) => {
      ckList.forEach(e => {
        e.checked = checkAll.checked;
      });
    });
  </script>
</body>

</html>